<template>
  <div class="grid auto-cols-max grid-flow-col gap-5 text-center h-30 bg-base border-base">
    <div class="rounded-box flex flex-col p-2 border">
    <span class="countdown font-mono text-5xl">
      <span :style="'--value:'+ year%100" aria-live="polite" aria-label="25"></span>
    </span>
      year
    </div>
    <div class="rounded-box flex flex-col p-2 border">
    <span class="countdown font-mono text-5xl">
      <span :style="'--value:'+ month" aria-live="polite" aria-label="7"></span>
    </span>
      month
    </div>
    <div class="rounded-box  flex flex-col p-2 border">
    <span class="countdown font-mono text-5xl">
      <span :style="'--value:'+ day" aria-live="polite" aria-label="15"></span>
    </span>
      days
    </div>
    <div class="rounded-box flex flex-col p-2 border">
    <span class="countdown font-mono text-5xl">
      <span :style="'--value:'+ hour" aria-live="polite" aria-label="10"></span>
    </span>
      hours
    </div>
    <div class="rounded-box  flex flex-col p-2 border">
    <span class="countdown font-mono text-5xl">
      <span :style="'--value:'+ minute" aria-live="polite" aria-label="24"></span>
    </span>
      min
    </div>
    <div class="rounded-box flex flex-col p-2 border">
    <span class="countdown font-mono text-5xl">
      <span :style="'--value:'+ second" aria-live="polite" aria-label="59"></span>
    </span>
      sec
    </div>
  </div>
</template>
<script setup>
import {computed, onBeforeUnmount, onMounted, ref} from "vue";

onMounted(async () => {
  startTimer()
})


// 创建响应式时间对象
const currentTime = ref(new Date())
const show12Hour = ref(false)

// 定时器ID
let timer = null

// 补零函数
const padZero = num => num.toString().padStart(2, '0')

// 计算属性：年份
const year = computed(() => {
  return currentTime.value.getUTCFullYear()
})

// 计算属性：月份
const month = computed(() => {
  return padZero(currentTime.value.getMonth() + 1)
})

// 计算属性：日期
const day = computed(() => {
  return padZero(currentTime.value.getDate())
})

// 计算属性：小时
const hour = computed(() => {
  const h = currentTime.value.getHours()
  if (show12Hour.value) {
    return h % 12 || 12
  }
  return padZero(h)
})

// 计算属性：分钟
const minute = computed(() => {
  return padZero(currentTime.value.getMinutes())
})

// 计算属性：秒钟
const second = computed(() => {
  return padZero(currentTime.value.getSeconds())
})

// 计算属性：完整日期
const fullDate = computed(() => {
  const date = currentTime.value
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return `${date.getFullYear()}年${padZero(date.getMonth() + 1)}月${padZero(date.getDate())}日 ${weekdays[date.getDay()]} ${hour.value}:${minute.value}:${second.value}`
})

// 更新时间函数
const updateTime = () => {
  const now = new Date()
  currentTime.value = now
}

// 切换时间格式
const toggleFormat = () => {
  show12Hour.value = !show12Hour.value
}


// 启动定时器
const startTimer = () => {
  timer = setInterval(updateTime, 1000)
}


// 组件卸载前清除定时器
onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
})

</script>
<style scoped>

</style>
